<script lang="ts" setup>
import { reactive, onActivated, defineAsyncComponent, ref, computed } from 'vue'
import { useTable } from '@/hooks/useTable'
import { queryProduct } from '@/api/term'
import {
  queryBikeProductTableCol,
  queryProductTableCol,
  supportDepositType
} from '@/api/term/types/term'
import { getToken } from '@/utils/cache/cookies'
import { useRoute } from 'vue-router'
import { IncludedBatteryType } from '@/types/enum'
const route = useRoute()
const form = reactive({
  storeId: route.query.storeId
})

const { data, loading, load } = useTable<queryProductTableCol>(
  queryProduct,
  getToken() ?? '',
  () => form
)
const includeBattery = computed(() => {
  return (type: IncludedBatteryType) => {
    switch (type) {
      case IncludedBatteryType.No:
        return '不含电池'
      case IncludedBatteryType.Yes:
        return '含电池'
      default:
        break
    }
  }
})

const changeDepositType = computed(() => {
  return (depositTypes: supportDepositType[]) => {
    if (depositTypes.length > 0) {
      let name = ''
      depositTypes.forEach((v) => (name += `${v.name}\t`))
      return name
    }
  }
})
const setId = (id: string) => {
  form.storeId = id
}
defineExpose({ load, setId })

onActivated(() => {
  form.storeId = route.query.storeId
})

</script>

<template>
  <el-table :data="data" class="no-border">
    <el-table-column
      prop="includeBattery"
      sortable
      label="套餐类型"
      sort-by="includeBattery"
      align="center"
    >
      <template #default="scope">
        <span>{{ includeBattery(scope.row.includeBattery) }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="inputVoltage"
      sortable
      sort-by="inputVoltage"
      label="电压类型"
      align="center"
    />
    <el-table-column
      prop="shortName"
      sortable
      sort-by="shortName"
      label="可选套餐"
      align="center"
    />
    <el-table-column prop="rent" label="套餐金额" align="center" />
    <el-table-column prop="originRent" label="原价" align="center" />
    <el-table-column prop="deposit" label="押金" align="center" />
    <el-table-column prop="" label="对应城市" align="center" />
    <el-table-column label="免押类型" align="center">
      <template #default="scope">
        <span>{{ changeDepositType(scope.row.supportDepositTypes) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="tags" label="其他" align="center" />
  </el-table>
</template>

<style scoped></style>
